<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";

let rateChartRef = ref();
onMounted(() => {
  let rateChart = echarts.init(rateChartRef.value);
  rateChart.setOption({
    title:{
      text:'男女比例',
      left: '40%'
    },
    xAxis: {
      show: false,
      min:0,
      max:100
    },
    yAxis:{
      show: false,
      type: 'category'
    },
    series: [{
      type: 'bar',
      data: [58],
      barWidth:20,
      z:10,
      itemStyle: {
        borderRadius: 20
      }
    },{
      type:'bar',
      data: [100],
      barWidth:20,
      barGap: '-100%',
      z:1,
      itemStyle: {
        color:'pink',
        borderRadius: 20
      }
    }],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    }
  });
})
</script>

<template>
  <div class="sex-rate">
    <div class="title">男女比例</div>
    <div class="rate">
      <p>男性：58%</p>
      <p>女性：42%</p>
    </div>
    <div class="rate-chart" ref="rateChartRef">

    </div>
  </div>
</template>

<style scoped lang="scss">
.sex-rate {
  flex: 0.5;
  background-color: #1dc779;
  margin: 10px;

  .title {
    font-size: 20px;
    color: white;
  }

  .rate {
    display: flex;
    justify-content: space-around;
  }

  .rate-chart {
    width: 100%;
    height: 100px;
  }
}
</style>